<template>
  <view class="u-dropdown">
    <view class="u-dropdown__menu" :style="{
			height: $u.addUnit(height)
		}" :class="{
			'u-border-bottom': borderBottom
		}">
      <view class="u-dropdown__menu__item" v-for="(item, index) in menuList" :key="index"
            @tap.stop="menuClick(index)">
        <view class="u-flex">
          <text class="u-dropdown__menu__item__text" :style="{
						color: item.disabled ? '#c0c4cc' : (index === current || highlightIndex == index) ? activeColor : inactiveColor,
						fontSize: $u.addUnit(titleSize)
					}">{{item.title}}</text>
          <view class="u-dropdown__menu__item__arrow" :class="{
						'u-dropdown__menu__item__arrow--rotate': index === current
					}">
            <u-icon :custom-style="{display: 'flex'}" :name="menuIcon" :size="$u.addUnit(menuIconSize)"
                    :color="index === current || highlightIndex == index ? activeColor : '#c0c4cc'"></u-icon>
          </view>
        </view>
      </view>
    </view>
    <view class="u-dropdown__content" :style="[contentStyle, {
			transition: `opacity ${duration / 1000}s linear`,
			top: $u.addUnit(height),
			height: contentHeight + 'px',
		}]" @tap="maskClick" @touchmove.stop.prevent>
      <view @tap.stop.prevent class="u-dropdown__content__popup" :style="[popupStyle]">
        <slot></slot>
      </view>
      <view class="u-dropdown__content__mask"></view>
    </view>
  </view>
</template>
<script>
/**
 * dropdown �����˵�
 * @description �����һ����������չ���˵���ͬʱ���л����ѡ��ĳ���
 * @tutorial http://uviewui.com/components/dropdown.html
 * @property {String} active-color �����ѡ�ѡ�е���ɫ��Ĭ��#2979ff��
 * @property {String} inactive-color �����ѡ�δѡ�е���ɫ��Ĭ��#606266��
 * @property {Boolean} close-on-click-mask ��������Ƿ�رղ˵���Ĭ��true��
 * @property {Boolean} close-on-click-self �����ǰ����������Ƿ�رղ˵���Ĭ��true��
 * @property {String | Number} duration ѡ�չ��������Ĺ���ʱ�䣬��λms��Ĭ��300��
 * @property {String | Number} height ����˵��ĸ߶ȣ���λ���⣨Ĭ��80��
 * @property {String | Number} border-radius �˵�չ�������·���Բ��ֵ����λ���⣨Ĭ��0��
 * @property {Boolean} border-bottom ����˵��Ƿ���ʾ�±߿�Ĭ��false��
 * @property {String | Number} title-size ����������С����λ���⣬��ֵĬ��Ϊrpx��λ��Ĭ��28��
 * @event {Function} open �����˵�����ʱ����
 * @event {Function} close �����˵����ر�ʱ����
 * @example <u-dropdown></u-dropdown>
 */
export default {
  name: 'u-dropdown',
  props: {
    // �˵������ѡ��ļ���̬��ɫ
    activeColor: {
      type: String,
      default: '#6072FF'
    },
    // �˵������ѡ���δ����̬��ɫ
    inactiveColor: {
      type: String,
      default: '#606266'
    },
    // ��������Ƿ�رղ˵�
    closeOnClickMask: {
      type: Boolean,
      default: true
    },
    // �����ǰ����������Ƿ�رղ˵�
    closeOnClickSelf: {
      type: Boolean,
      default: true
    },
    // ����ʱ��
    duration: {
      type: [Number, String],
      default: 300
    },
    // ����˵��ĸ߶ȣ���λ���⣬��ֵĬ��Ϊrpx��λ
    height: {
      type: [Number, String],
      default: 40
    },
    // �Ƿ���ʾ�±߿�
    borderBottom: {
      type: Boolean,
      default: false
    },
    // ����������С
    titleSize: {
      type: [Number, String],
      default: 14
    },
    // �������������ݲ��ֵ�Բ��ֵ
    borderRadius: {
      type: [Number, String],
      default: 0
    },
    // �˵��Ҳ��iconͼ��
    menuIcon: {
      type: String,
      default: 'arrow-down'
    },
    // �˵��Ҳ�ͼ��Ĵ�С
    menuIconSize: {
      type: [Number, String],
      default: 13
    }
  },
  data() {
    return {
      showDropdown: true, // �Ƿ�������˵�,
      menuList: [], // ��ʾ�Ĳ˵�
      active: false, // �����˵���״̬
      // ��ǰ�ǵڼ����˵����ڼ���״̬��С�����д˴�����д��false����""�����������current��ֵΪ0��
      // ���ܵ�TXû��ʹ��===����ʹ��==�жϣ����³�����Ϊǰ�����û�б仯���Ӷ����ᴥ����ͼ����
      current: 99999,
      // ������ݵ���ʽ����ʼʱ���ڵײ㣬��͸��
      contentStyle: {
        zIndex: -1,
        opacity: 0
      },
      // ��ĳ���˵����ָ�����״̬
      highlightIndex: 99999,
      contentHeight: 0
    }
  },
  computed: {
    // �����������ֵ���ʽ
    popupStyle() {
      let style = {};
      // ����Y��λ�ƣ�չ��״̬ʱ���ָ�ԭλ������״̬ʱ������λ��100%����������
      style.transform = `translateY(${this.active ? 0 : '-100%'})`
      style['transition-duration'] = this.duration / 1000 + 's';
      style.borderRadius = `0 0 ${this.$u.addUnit(this.borderRadius)} ${this.$u.addUnit(this.borderRadius)}`;
      return style;
    }
  },
  created() {
    // �������������(u-dropdown-item)��this��������data������������������΢��С��������ѭ�����ö�����
    this.children = [];
  },
  mounted() {
    this.getContentHeight();
  },
  methods: {
    init() {
      // ��ĳ����������ݱ仯ʱ�������������init�����������ÿһ����������³�ʼ��һ��
      // �Ա�֤���ݵ���ȷ��
      this.menuList = [];
      this.children.map(child => {
        child.init();
      })
    },
    // ����˵�
    menuClick(index) {
      // �ж��Ƿ񱻽���
      if (this.menuList[index].disabled) return;
      // ������ʱ�������͵�ǰ������������ͬ����ζ�ŵ���˼������Ҫ���������˵�
      if (index === this.current && this.closeOnClickSelf) {
        this.close();
        // �ȶ������������Ƴ������˵��е����ݣ�����ֱ���Ƴ���Ҳ��û�������˵������Ч����
        setTimeout(() => {
          this.children[index].active = false;
        }, this.duration)
        return;
      }
      this.open(index);
    },
    // �������˵�
    open(index) {
      // ���ø����������������ɶ���˵�ͬʱ����
      // this.highlightIndex = 9999;
      // չ��ʱ�������������ݵ���ʽ
      this.contentStyle = {
        zIndex: 11,
      }
      // ���չ��״̬�Լ���ǰչ���������
      this.active = true;
      this.current = index;
      // �������е���Ԫ�أ�������ƥ�������Ϊ����״̬����Ϊ��Ԫ����ͨ��v-if�����л���
      // ֮���Բ�����display: none������Ϊnvueû��display�������
      this.children.map((val, idx) => {
        val.active = index == idx ? true : false;
      })
      this.$emit('open', this.current);
    },
    // ���������˵���������״̬
    close() {
      this.$emit('close', this.current);
      // ����Ϊ����״̬��ͬʱcurrent��λ������Ϊ���ַ���
      this.active = false;
      this.current = 99999;
      // �������ݵ���ʽ���е�������͸��������Ϊ0
      // this.contentStyle = {
      // 	zIndex: -1,
      // 	opacity: 0
      // }
      this.contentStyle = {
        opacity: 0
      }
      setTimeout(() => {
        this.contentStyle = {
          zIndex: -1,
          opacity: 0
        }
      }, 500)
    },
    // �������
    maskClick() {
      // ��������������֣�ֱ�ӷ���
      if (!this.closeOnClickMask) return;
      this.close();
    },
    // �ⲿ�ֶ�����ĳ���˵�����
    highlight(index = undefined) {
      this.highlightIndex = index !== undefined ? index : 99999;
    },
    // ��ȡ�����˵����ݵĸ߶�
    getContentHeight() {
      // �����ԭ��Ϊ����Ϊdropdown�������Զ�λ�ģ������������������ݣ��������һ���߶�
      // ����������ռ���˵�һ�£�ֱ����Ļ�ײ��ĸ߶�
      // this.$u.sys()ΪuView��װ�Ļ�ȡ�豸��Ϣ�ķ���
      let windowHeight = this.$u.sys().windowHeight;
      this.$uGetRect('.u-dropdown__menu').then(res => {
        // �����ȡ����dropdown�ĳߴ磬��H5�ϣ�uniapp��ȡ�ߴ�����bug��(��ǰ����޸����������ֳ����˴�bug��Ŀǰhx2.8.11�汾)
        // H5��bug����ΪԪ�سߴ��topֵΪ�������ײ�����Ԫ�ص��ϱ��صľ��룬����Ԫ�ص�bottomֵȷ�ǵ�����������Ԫ�صײ��ľ���
        // �����ǻ���ì�ܵģ�����ԭ����H5�˵�������ԭ����uni�Ŀ����ߴ������
        // ����ȡ�˵�����bottonֵ����ģ�������res.top������ҳ�����ɹ���
        this.contentHeight = windowHeight - res.bottom;
      })
    }
  }
}
</script>

<style scoped lang="scss">
@import "@/components/css/style.components.scss";

.u-dropdown {
  flex: 1;
  width: 100%;
  position: relative;

  &__menu {
    @include vue-flex;
    position: relative;
    z-index: 11;
    height: 80rpx;

    &__item {
      flex: 1;
      @include vue-flex;
      justify-content: center;
      align-items: center;

      &__text {
        font-size: 28rpx;
        color: $u-content-color;
      }

      &__arrow {
        margin-left: 6rpx;
        transition: transform .3s;
        align-items: center;
        @include vue-flex;

        &--rotate {
          transform: rotate(180deg);
        }
      }
    }
  }

  &__content {
    position: absolute;
    z-index: 8;
    width: 100%;
    left: 0px;
    bottom: 0;
    overflow: hidden;


    &__mask {
      position: absolute;
      z-index: 9;
      background: rgba(0, 0, 0, .3);
      width: 100%;
      left: 0;
      top: 0;
      bottom: 0;
    }

    &__popup {
      position: relative;
      z-index: 10;
      transition: all 0.3s;
      transform: translate3D(0, -100%, 0);
      overflow: hidden;
    }
  }

}
</style>
